<template>
<div class="adminList">
  <el-table :data="adminArr"  height="750">
    <el-table-column type="index" label="编号"
                     width="100"></el-table-column>
    <el-table-column label="头像" width="200">
      <template slot-scope="scope">
        <!--scope.row代表当前遍历的数组中的对象-->
        <el-avatar :size="70" :src="scope.row.img"></el-avatar>
      </template>
    </el-table-column>
    <el-table-column label="昵称" prop="nickname" width="200"></el-table-column>
    <el-table-column label="账号" prop="name" width="200"></el-table-column>
    <el-table-column label="角色" prop="root" width="200"></el-table-column>

    <!--*******************************-->
    <el-table-column label="操作" fixed="right">
      <!--scope代表每行对应的数据里面的index属性代表下标,
      里面的row代表每行对应的数组中的对象-->
      <template slot-scope="scope">
        <!--confirm确认事件-->
        <el-popconfirm @confirm="adminDelete(scope.$index, scope.row)"
                       title="确定删除这个管理员吗?">
          <el-button size="mini"
                     type="danger" slot="reference">删除</el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
    <!--*******************************-->
  </el-table>
</div>
</template>

<script>
import {deleteAdmin} from "@/api/admin_api";
import {showAdmin} from "@/api/admin_api";

export default {
  name: "admin-list",
  data(){
    return{
      adminArr:[
          // {img:require('@/assets/img/管理员1号.jpg'),nickname:'管理员1号',name:'2221@qq.com',root:'用户管理员'},
          // {img:require('@/assets/img/管理员2号.jpg'),nickname:'管理员2号',name:'2222@qq.com',root:'用户管理员'},
          // {img:require('@/assets/img/管理员3号.jpg'),nickname:'管理员3号',name:'2223@qq.com',root:'用户管理员'},
          // {img:require('@/assets/img/管理员4号.jpg'),nickname:'管理员4号',name:'2224@qq.com',root:'用户管理员'},
          // {img:require('@/assets/img/管理员5号.jpg'),nickname:'管理员5号',name:'2225@qq.com',root:'用户管理员'},
          // {img:require('@/assets/img/管理员6号.jpg'),nickname:'管理员6号',name:'2226@qq.com',root:'用户管理员'},
          // {img:require('@/assets/img/管理员7号.jpg'),nickname:'管理员7号',name:'2227@qq.com',root:'用户管理员'},
          // {img:require('@/assets/img/管理员8号.jpg'),nickname:'管理员8号',name:'2228@qq.com',root:'用户管理员'},
          // {img:require('@/assets/img/管理员9号.jpg'),nickname:'管理员9号',name:'2229@qq.com',root:'用户管理员'},
          // {img:require('@/assets/img/管理员10号.jpg'),nickname:'管理员10号',name:'22210@qq.com',root:'用户管理员'},
      ]
    }
  },
  created() {
    showAdmin().then((res)=>{
      this.adminArr = res.data.data;
    })
  },
  methods:{
    adminDelete(index){
        deleteAdmin(this.adminArr[index].name).then(()=>{
          this.adminArr.splice(index,1)
      })
    }
  }
}
</script >

<style>

.adminList .el-table .cell{
  text-align: center;
}
.adminList .el-table {
  font-size: 17px;
  color: #606266;
}
</style>